<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/underscore-min.js"></script>
    <script src="../js/base64.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            background: #F2F2F2;
        }
        .titlebar {
            height: 60px;
            font-size: 30pt;
            line-height: 60px;
            padding-left: 16px;
            background: #2785D1;
            color: white;
        }
        .roomlist {
            padding: 8px;
            background: #f2f2f2;
        }
        .roomlist .room {
            display: inline-block;
            padding: 8px;
            border: 1px solid black;
            cursor: pointer;
            background: white;
        }
        .roomlist .room img {
            height: 320px;
            width: 320px;
            overflow: hidden;
            object-fit: none;
        }
        .roomlist .room .roominfo {
            text-align: center;
        }
        .hint {
            padding: 8px;
            font-size: 24px;
            color: #4c4c4c;
            background: white;
        }
    </style>
</head>
<body>
<div class="titlebar">
    灾情直播间
</div>
<div class="hint">
    查询中...
</div>
<div class="roomlist">
</div>
<script type="text/html" id="tpl">
    <div class="room">
        <img src="<%=img%>" alt="" class="roompreview">
        <div class="roominfo">
            <span class="streamname">
                <%=text%>
            </span>
        </div>
    </div>
</script>
<script>
    $(function() {
        var tpl = $('#tpl').text();
        var $roomlist = $('.roomlist').eq(0);
        var $hint = $('.hint').eq(0);
        $.ajax({
            url: '/api/svr/mgr/live/pullList',
            dataType: 'json',
            success: function(data) {
                if (data && data.length) {
                    $hint.remove();
                    for (var i = 0; i < data.length; i++) {
                        var img = 'http://zqzb.oss-cn-hangzhou.aliyuncs.com/zqzb/' + data[i].user + '.jpg';
                        var html = _.template(tpl)({img:img, text:data[i].user});
                        $(html).data('url', data[i].url).data('streamName', data[i].user).appendTo($roomlist).click(gotoPlayer);
                    }
                } else {
                    $hint.text('当前没有直播');
                }
            },
            error: fail
        });

        function fail() {
            $hint.text('获取直播列表失败');
        }

        function gotoPlayer(ev) {
            var $this = $(this);
            var url = $this.data('url');
            var streamName = $this.data('streamName');
            window.open('player.html?url=' + Base64.encode(url) + '&streamName=' + streamName);
        }
    });
</script>
</body>
</html>